<template>
  <div >
    <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey, type)"  class="menu">
      <a-menu-item class="menu-item" key="1"><a-icon type="folder" :style="{fontSize:'16px'}" />新建目录</a-menu-item>
      <a-menu-item class="menu-item" key="2"><a-icon type="database" :style="{fontSize:'16px'}" theme="filled" />新建表</a-menu-item>
      <a-menu-item class="menu-item" key="3"><a-icon type="edit" :style="{fontSize:'16px'}" theme="filled" />编辑</a-menu-item>
      <a-menu-item class="menu-item" key="4"><a-icon type="delete" :style="{fontSize:'16px'}" theme="filled" />删除</a-menu-item>
    </a-menu>
    <slot></slot>
  </div>
</template>

<script>
import Vue from 'vue';
import {Menu} from 'ant-design-vue';
Vue.use(Menu);
// let antd = {Menu};
// Object.keys(antd).forEach(item => {
//   Vue.use(antd[item]);
// })
export default {
  name: "AntMenu",
  methods: {
    onContextMenuClick(treeKey, menuKey, type) {
      console.log(treeKey + "  " + menuKey + "  " + type)
    }
  },
}
</script>

<style scoped>
.menu {
  padding-left: 0px;
  width: 105px;
  border: 1px solid lightgray;
  border-radius: 5px;
  background: white;
}
.menu-item {
  padding-left: 2px;
  line-height: 28px;
  height: 28px;
  margin: 0%;

}
</style>